<template>
  <el-dialog v-loading="loading" :visible.sync="visible" :title="modalTaskTitle" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form v-loading="!operate" :model="dataForm" ref="dataForm"
             :label-width="$i18n.locale === 'en-US' ? '120px' : '140px'">
      <div v-show="dealFormFlag">
        <el-form-item prop="approve" :label="$t('approveManage.approve')">
          <el-radio-group v-model="dataForm.approve" @change="changeHandler">
            <el-radio v-for="(item, i) in approveItems" :key="i" :label="item.key">{{ item.value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.approve == 3" prop="failNodeSid" label="驳回到">
          <!--下拉框-->
          <el-select v-model="dataForm.failNodeSid" placeholder="请选择驳回节点" filterable remote reserve-keyword>
            <el-option v-for="item in nodeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dataForm.approve != 4" prop="comment" :label="$t('approveManage.comment')">
          <el-input type="textarea" v-model="dataForm.comment" :placeholder="$t('approveManage.comment')">
          </el-input>
        </el-form-item>
        <el-form-item v-if="dataForm.approve==4" prop="users" label="转办用户">
          <el-row>
            <el-col :span="20">
              <span v-if="dataForm.users.length<=0"> &nbsp;</span>
              <div v-else>
                <el-tag v-for="(tag, i) in dataForm.users" :key="i" closable type="info" @close="usersHandleClose(tag)">
                  {{tag.username}}
                </el-tag>
              </div>

            </el-col>
            <el-col :span="4">
              <el-button icon="el-icon-search" circle @click="showUserSel()"></el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item v-if="isMultiInstancehas&&signature&& dataForm.approve == 2" prop="countersign" label="加签">
          <el-switch v-model="dataForm.countersign">
          </el-switch>
        </el-form-item>
        <el-form-item v-if="dataForm.countersign" prop="users" label="加签用户">
          <el-row>
            <el-col :span="20">
              <span v-if="dataForm.users.length<=0"> &nbsp;</span>
              <el-tag v-for="(tag, i) in dataForm.users" :key="i" closable type="info" @close="usersHandleClose(tag)">
                {{tag.username}}
              </el-tag>
            </el-col>
            <el-col :span="4">
              <el-button icon="el-icon-search" circle @click="showUserSel()"></el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </div>
      <div v-show="dataForm.approve == 2">
        <el-form-item :label="$t('approveManage.nextApprover')" v-show="dataForm.assignees.length>0">
          <el-divider></el-divider>
        </el-form-item>
        <el-form-item v-for="(item, i) in dataForm.assignees" :key="i" :label="item.name">
          <el-select v-model="item.userNames" :multiple="item.multiple" clearable style="width:100%">
            <el-option v-for="(item1, i1) in item.assigneeNextList" :key="i1" :label="item1.realName"
                       :value="item1.username"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button @click="action.closeTab()">{{ $t('cancel') }}</el-button>
        <!-- <el-button v-if="transfer" @click="todoManageTransferHandle()" type="warning">转办</el-button> -->
        <el-button v-if="operate" type="primary" @click="dataFormSubmitHandle()">{{ $t('approveManage.deal') }}
        </el-button>

      </el-form-item>
    </el-form>
    <uni-user-select v-if="visible" ref="userSelect" @backFun="userBackFun" :width="'70%'" :initDataForm="initDataForm"
                     :multiple="dataForm.approve != 4">
    </uni-user-select>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
// import mainContent from '@/views/main-content'
// var content = mainContent
export default {
  data () {
    return {
      isBack: false,
      isTransfer: false,
      approve: 2,
      operate: false,
      loading: false,
      visible: false,
      isMultiInstancehas: false,
      signature: false,
      dealFormFlag: true,
      modalTaskTitle: '',
      approveItems: [], // 反对 6
      nodeList: {},
      action: {},
      initDataForm: {},
      transfer: false,
      dataForm: {
        id: '',
        userId: '',
        procInstId: '',
        comment: '',
        countersign: false,
        type: 0,
        assignees: [],
        backTaskKey: '-1',
        sendMessage: true,
        sendSms: true,
        sendEmail: true,
        approve: 2,
        failNodeSid: null,
        users: []
      }
    }
  },
  components: {},
  computed: {
    dataRule () {
      return {}
    }
  },
  methods: {
    changeHandler (value) {
      this.dataForm.comment = ''
      if (value === 2) {
        this.dataForm.comment = '同意'
      } else if (value === 4) {
        this.dataForm.comment = '转办'
      }
    },
    wanderInit () {
      this.visible = true
      this.dataForm.users = []
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()

        // 初始化数值
        this.modalTaskTitle = this.$t('approveManage.deal')
        this.dataForm = {
          ...this.dataForm,
          ...this.action.data
        }
        this.dealFormFlag = this.action.dealFormFlag
        this.dataForm.comment = '同意'
        this.getAssigneeNextList(this.dataForm.id).then(({ data: res }) => {
          if (res.code === 0) {
            this.$set(this.dataForm, 'assignees', res.data)
            this.setPageState()
          }
        })
        this.getNodeList()
        this.initApproveItems()
      })
    },
    // 初始化按钮
    initApproveItems () {
      this.approveItems = []
      if (!this.isBack && !this.isTransfer) {
        this.approveItems.push({ key: 2, value: '同意' })
        this.approveItems.push({ key: 3, value: '驳回' })
        if (this.transfer) {
          this.approveItems.push({ key: 4, value: '转办' })
        }
        this.dataForm.comment = '同意'
        this.dataForm.approve = 2
      } else if (!this.isTransfer) {
        this.approveItems.push({ key: 3, value: '驳回' })
        this.dataForm.approve = 3
        this.dataForm.comment = ''
      } else if (!this.isBack) {
        if (this.transfer) {
          this.approveItems.push({ key: 4, value: '转办' })
          this.dataForm.approve = 4
          this.dataForm.comment = '转办'
        }
      }
    },
    getNodeList () {
      this.$http.get('/act/process/backNodeList/' + this.dataForm.id).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        if (!res.data || res.data.length <= 0) {
          this.$message.info('没有用户节点信息')
          return false
        } else {
          // this.$set(res.data, 0, { id: '', name: '发起人' })
          this.nodeList = res.data
        }
      }).catch(() => { })
    },
    setPageState () {
      this.operate = true
    },
    showUserSel () {
      this.dialogVisible = true
      // 等待DOM完成更新 v-if 渲染后执行
      this.$nextTick(() => {
        this.$refs.userSelect.init()
      })
    },
    usersHandleClose (user) {
      this.dataForm.users = this.dataForm.users.filter(item => item.id !== user.id)
      this.$refs.userSelect.handleClose(user)
    },
    userBackFun (data) {
      this.dataForm.users = data
    },
    getAssigneeNextList (taskId, params) {
      return this.$http.get(`/flowable/task/getAssigneeNextList/${taskId}`, { params: params })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      // 判断是否需要批复
      if (this.dealFormFlag) {
        // 调用批复校验 目前强制填写审批内容
        if (!this.dataForm.comment) {
          return this.$message.error('请填写审批备注')
        }
      }
      // 判断是否需要加签
      if (this.dataForm.countersign && this.dataForm.users.length === 0) {
        return this.$message.error('请选择加签用户')
      }

      if (this.dataForm.approve === 4 && this.dataForm.users.length === 0) {
        return this.$message.error('请选择转办用户')
      }
      // 调用表单审批
      this.dealTask(this.dataForm)
    }, 1000, { 'leading': true, 'trailing': false }),
    // 办理
    dealTask (params) {
      this.loading = true
      let r = this.$http.post('/flowable/task/dealTask', params)
      r.then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.action.closeTab()
          }
        })
      }).catch(() => { })
    }
  }
}
</script>
